<script setup>
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus';
import { Edit, Delete, Search, RefreshRight, Plus } from '@element-plus/icons-vue'
import warehouseAreaOpView from './warehouseAreaOp.vue'
import { getWarehouseListAll, getWarehouseAreaPage, deleteWarehouseArea } from '@/api/warehouse'
const warehouseAreaOp = ref(null)
const queryForm = ref({
  name: '',
  warehouseId: ''
})

const reset = ref(
  () => {
    queryForm.value.name = ''
    queryForm.value.warehouseId = ''
  }
)
//所有仓库
const warehouseListAll = ref([])
const getListAll = async () => {
  let res = await getWarehouseListAll()
  warehouseListAll.value = res.data
}
//查询库区
const tableData = ref([])
const getData = async () => {
  let res = await getWarehouseAreaPage(currentPage.value, pageSize.value, queryForm.value.name, queryForm.value.warehouseId)
  tableData.value = res.data.rows
  total.value = res.data.total
}
const cancle = () => {
  reset.value()
  getData()
}
//新增
const add = () => {
  warehouseAreaOp.value.dialogFormVisible = true
  warehouseAreaOp.value.title = '新增库区：'
  warehouseAreaOp.value.reset()
}
//修改
const handleClick = (row) => {
  warehouseAreaOp.value.dialogFormVisible = true
  warehouseAreaOp.value.title = '修改库区：'
  warehouseAreaOp.value.formData = { ...row }
}
//删除
const handleDel = async (row) => {
  let result = await deleteWarehouseArea(row.id)
  if (result.code == 200) {
    getData()
    ElMessage.success('删除成功!')
  } else {
    ElMessage.error('删除失败,仓库已经被使用!')
  }
}
// 分页
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(0)
const handleSizeChange = (val) => {
  currentPage.value = 1
  pageSize.value = val
  getData()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  getData()
}
onMounted(() => {
  getListAll()
  getData()
})
</script>
<template>
  <div>
    <el-form :inline="true" :model="queryForm" label-width="100px">
      <el-form-item label="仓库名称：" style="width: 235px;">
        <el-select v-model="queryForm.warehouseId" placeholder="请选择仓库" clearable style="width: 100%;">
          <el-option v-for="item in warehouseListAll" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="库区名称：" style="width: 235px;">
        <el-input v-model="queryForm.name" placeholder="请输入库区名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button :icon="Search" circle @click="getData"></el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="info" :icon="RefreshRight" circle @click="cancle"></el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" :icon="Plus" circle @click="add"></el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-table border :data="tableData" style="width: 100%;height: 380px;">
      <el-table-column fixed type="index" prop="id" label="#" width="100" align="center" />
      <el-table-column prop="warehouseName" label="仓库名称" align="center" />
      <el-table-column prop="name" label="库区名称" align="center" />
      <el-table-column prop="category" label="库区类型" align="center" />
      <el-table-column prop="createTime" label="创建时间" align="center" />
      <el-table-column prop="isDel" label="是否有效" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.isDel == 1" type="primary">有效</el-tag>
          <el-tag v-else type="danger">无效</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" :icon="Edit" circle @click="handleClick(scope.row)" />
          <el-button type="danger" :icon="Delete" circle @click="handleDel(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 分页 -->
  <br />
  <div style="display: flex; justify-content: center; align-items: center;">
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper" :total="total" background=true @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
  <warehouseAreaOpView ref="warehouseAreaOp" @flash="getData" />
</template>
<style scoped></style>